<template>
  <div>
    <el-tabs default-active-key="1">
      <!--网格配置面板start-->
      <el-tab-pane key="1" tab="网格">
        <!--第一行start-->
        <el-row align="middle">
          <el-col :span="10">Grid Type</el-col>
          <el-col :span="14">
            <el-select
              v-model="attrs.type"
              style="width: 100%"
              @change="(value)=>{
                attrs.type = value
              }"
            >
              <el-option :value="gridType.dot">Dot</el-option>
              <el-option :value="gridType.fixedDot">
                Fixed Dot
              </el-option>
              <el-option :value="gridType.mesh">Mesh</el-option>
              <el-option :value="gridType.doubleMesh">
                Double Mesh
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <!--第一行end-->
        <!--第二行start-->
        <el-row align="middle" style="padding-top: 12px">
          <el-col :span="10">Grid Size</el-col>
          <el-col :span="14">
            <el-input-number v-model="attrs.size" style="width: 100%" :min="1" :max="20" />
          </el-col>
        </el-row>
        <!--第二行end-->
        <div v-if="attrs.type === 'doubleMesh'">
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="10">Primary Color</el-col>
            <el-col :span="14">
              <el-input
                type="color"
                :value="attrs.color"
                style="width: 100%"
                @change="(e) => {
                  attrs.color = e.target.value
                }"
              />
            </el-col>
          </el-row>
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="10">Primary Thickness</el-col>
            <el-col :span="14">
              <el-input-number v-model="attrs.thickness" style="width: 100%" :min="0.5" :max="10" />
            </el-col>
          </el-row>
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="10">Secondary Color</el-col>
            <el-col :span="14">
              <el-input
                type="color"
                :value="attrs.colorSecond"
                style="width: 100%"
                @change="(e) => {
                  attrs.colorSecond = e.target.value
                }"
              />
            </el-col>
          </el-row>
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="10">Secondary Thickness</el-col>
            <el-col :span="14">
              <el-input-number v-model="attrs.thicknessSecond" style="width: 100%" :min="0.5" :max="10" />
            </el-col>
          </el-row>
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="10">Scale Factor</el-col>
            <el-col :span="14">
              <el-input-number v-model="attrs.factor" style="width: 100%" :min="1" :max="10" />
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="10">Grid Color</el-col>
            <el-col :span="14">
              <el-input
                v-model="attrs.color"
                type="color"
                style="width: 100%"
                @change="(e) => {
                  attrs.color = e.target.value
                }"
              />
            </el-col>
          </el-row>
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="10">Thickness</el-col>
            <el-col :span="12">
              <el-input-number v-model="attrs.thickness" style="width: 100%" :min="0.5" :max="10" />
            </el-col>
            <el-col :span="2">
              <div class="result">{{ attrs.thickness }}</div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <!--网格配置面板end-->
      <!--背景配置面板start-->
      <el-tab-pane key="2" tab="背景">
        <!--背景颜色-->
        <el-row align="middle" style="padding-top: 12px">
          <el-col :span="6">Color</el-col>
          <el-col :span="14">
            <el-input
              v-model="attrs.bgColor"
              type="color"
              style="width: 100%"
              @change="(e) => {
                attrs.bgColor = e.target.value
              }"
            />
          </el-col>
        </el-row>
        <!--背景图片（？？这个地方有点问题，默认是展示背景图片的，但是现在没有展示，待优化）-->
        <el-row align="middle" style="padding-top: 12px">
          <el-col :span="14" :offset="4">
            <el-checkbox
              :checked="attrs.showImage"
              @change="(e)=>{
                attrs.showImage = e.target.checked
              }"
            >
              Show Image
            </el-checkbox>
          </el-col>
        </el-row>
        <!--如果展示图片的话，开启图片的相关配置-->
        <div v-if="attrs.showImage">
          <!--图片展示方式-->
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="6">Repeat</el-col>
            <el-col :span="14">
              <el-select
                style="width: 100%"
                :value="attrs.repeat"
                @change="(value)=>{
                  attrs.repeat = value
                }"
              >
                <el-option :value="repeatType.noRepeat">noRepeat</el-option>
                <el-option :value="repeatType.repeat">repeat</el-option>
                <el-option :value="repeatType.repeatX">repeatX</el-option>
                <el-option :value="repeatType.repeatY">repeatY</el-option>
                <el-option :value="repeatType.round">round</el-option>
                <el-option :value="repeatType.space">space</el-option>
                <el-option :value="repeatType.flipX">flipX</el-option>
                <el-option :value="repeatType.flipY">flipY</el-option>
                <el-option :value="repeatType.flipXY">flipXY</el-option>
                <el-option :value="repeatType.watermark">watermark</el-option>
              </el-select>
            </el-col>
          </el-row>
          <!--如果图片展示方式选择为水印watermark，开启水印配置-->
          <div v-if="attrs.repeat ==='watermark'">
            <!--水印旋转角度-->
            <el-row align="middle" style="padding-top: 12px">
              <el-col :span="16" :offset="6" style="font-size: 12px">
                Watermark Angle
              </el-col>
              <el-col :span="14" :offset="6">
                <el-input-number v-model="attrs.angle" :min="0" :max="360" style="width: 100%" />
              </el-col>
            </el-row>
          </div>
          <!--背景图片位置-->
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="6">Position</el-col>
            <el-col :span="14">
              <el-select
                v-model="attrs.position"
                style="width: 100%"
                @change="(value)=>{
                  attrs.position = value
                }"
              >
                <el-option value="center">center</el-option>
                <el-option value="left">left</el-option>
                <el-option value="right">right</el-option>
                <el-option value="top">top</el-option>
                <el-option value="bottom">bottom</el-option>
                <el-option value="50px 50px">50px 50px</el-option>
                <el-option :value="JSON.stringify({ x: 50, y: 50 })"> {`{ x: 50, y: 50 }`}</el-option>
              </el-select>
            </el-col>
          </el-row>
          <!--背景图大小-->
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="6">Size</el-col>
            <el-col :span="14">
              <el-select
                v-model="attrs.bgSize"
                style="width: 100%"
                @change="(value)=>{
                  attrs.bgSize = value
                }"
              >
                <el-option value="auto auto">auto auto</el-option>
                <el-option value="cover">cover</el-option>
                <el-option value="contain">contain</el-option>
                <el-option value="300px 300px">300px 300px</el-option>
                <el-option value="100% 100%">100% 100%</el-option>
                <el-option :value="JSON.stringify({ width: 150, height: 150 })"> {`{width: 150, height: 150 }`}</el-option>
              </el-select>
            </el-col>
          </el-row>
          <!--透明度-->
          <el-row align="middle" style="padding-top: 12px">
            <el-col :span="6">
              Opacity
            </el-col>
            <el-col :span="14">
              <el-input-number v-model="attrs.opacity" :min="0.05" :max="1" :step="0.05" style="width: 100%" />
            </el-col>
          </el-row>
        </div>

      </el-tab-pane>
      <!--背景配置面板end-->
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'Index',
  components: {
  },
  props: {
    flowGraph: {
      type: null, // 实例对象竟然是null
      default: null,
      required: true
    }
  },
  data() {
    return {

      // 默认配置参数
      attrs: {
        // 网格参数start
        type: 'mesh',
        size: 10,
        color: '#ffffff',
        thickness: 1,
        colorSecond: '#ffffff',
        thicknessSecond: 1,
        factor: 1,
        // 网格参数end
        // 背景参数start
        bgColor: '#ffffff', // 背景颜色参数
        showImage: true, // 背景图片是否展示
        repeat: 'no-repeat',
        angle: 10, // 旋转角度
        position: 'center', // 背景图位置
        bgSize: 'auto auto', // 背景图大小
        opacity: 0.05
        // 背景参数end
      },

      gridType: {
        dot: 'dot',
        fixedDot: 'fixedDot',
        mesh: 'mesh',
        doubleMesh: 'doubleMesh'
      },
      repeatType: {
        noRepeat: 'no-repeat',
        repeat: 'repeat',
        repeatX: 'repeat-x',
        repeatY: 'repeat-y',
        round: 'round',
        space: 'space',
        flipX: 'flipX',
        flipY: 'flipY',
        flipXY: 'flipXY',
        watermark: 'watermark'
      }
    }
  },
  computed: {
    // 1 计算属性监听网格数据变化
    gridDataChange() {
      const that = this
      return {
        type: that.attrs.type,
        color: that.attrs.color,
        thickness: that.attrs.thickness,
        thicknessSecond: that.attrs.thicknessSecond,
        colorSecond: that.attrs.colorSecond,
        factor: that.attrs.factor
      }
    },
    // 2 计算属性监听背景颜色的数据变化
    backgroundDataChange() {
      const that = this
      return {
        bgColor: that.attrs.bgColor,
        showImage: that.attrs.showImage,
        repeat: that.attrs.repeat,
        angle: that.attrs.angle,
        bgSize: that.attrs.bgSize,
        position: that.attrs.position,
        opacity: that.attrs.opacity
      }
    }
  },
  watch: {
    // 1 通过监听计算属性的1来监听间接监听表格数据
    gridDataChange: {
      // nv为计算属性变化后的新数据（newValue简称nv）
      handler(nv) {
        let options
        if (nv.type === 'doubleMesh') {
          options = {
            type: nv.type,
            args: [
              {
                color: nv.color,
                thickness: nv.thickness
              },
              {
                color: nv.colorSecond,
                thickness: nv.thicknessSecond,
                factor: nv.factor
              }
            ]
          }
        } else {
          options = {
            type: nv.type,
            args: [
              {
                color: nv.color,
                thickness: nv.thickness
              }
            ]
          }
        }
        const { graph } = this.flowGraph
        // 网格绘制
        graph.drawGrid(options)
      },
      deep: true,
      immediate: false
    },
    // 2 直接监听网格大小的变化
    'attrs.size': {
      handler(nv) {
        const { graph } = this.flowGraph
        graph.setGridSize(nv)
      },
      deep: true,
      immediate: false
    },
    // 3 通过监听算属性中的2来间接监听背景颜色数据的变化
    backgroundDataChange: {
      handler(nv) {
        const options = {
          color: nv.bgColor,
          image: nv.showImage ? 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*o-MuTpQaj7EAAAAAAAAAAABkARQnAQ' : undefined,
          repeat: nv.repeat,
          angle: nv.angle,
          size: this.tryToJSON(nv.bgSize),
          position: this.tryToJSON(nv.position),
          opacity: nv.opacity
        }
        const { graph } = this.flowGraph
        graph.drawBackground(options)
      },
      deep: true,
      immediate: false
    }
  },
  methods: {
    tryToJSON(val) {
      try {
        return JSON.parse(val)
      } catch (error) {
        return val
      }
    }
  }
}
</script>

<style scoped>

</style>
